import React from 'react'
class App extends React.Component{
    // render(){
    //     return(
    //         <div>
    //             <p>这是一个外部的js组件</p>
    //         </div>
    //     )
    // }

    state={
        txt: '',//文本框内容
        count: 0,
        context: "我在武汉玩耍ing", //内容
        city: "武汉",
        checkBoxs: false,
      }
      // 文本框
      txtChange=(e)=>{
        this.setState({
          txt: e.target.value
        })
      }
      contextChange=(e)=>{
        this.setState({
          context: e.target.value
        })
      }
      selectChange=(e)=>{
        this.setState({
          city: e.target.value
        })
      }
    
      sexChange=(e)=>{
        this.setState({
          checkBoxs: e.target.checked
        })
      }
      render(){
        return(
          <div>
           文本框： <input type="text" value={this.state.txt} onChange={this.txtChange}></input>
          <p>{this.state.txt}</p>
          <h2>内容：</h2>
          <textarea value={this.state.context} onChange={this.contextChange}></textarea>
        <p>{this.state.context}</p>
          <h2>选择：</h2>
          <select value={this.state.city} onChange={this.selectChange}>
            <option value="sh">上海</option>
            <option value="bg">北京</option>
            <option value="wh">武汉</option>
            <option value="sz">深圳</option>
          </select>
           <p>{this.state.city}</p>
          <h2>单选：</h2>
          <input type="checkbox" checked={this.state.checkBoxs} onChange={this.sexChange}/>男
          <p>{this.state.checkBoxs}</p>
          </div>
        )
      }
}



//导出
export default App